Wijmo UI for the Web
階層データビューの作成
Wijmo ユーザーガイド > ウィジェット > Grid > 概念 > 階層データ連結 > 階層データビューの作成

ここでは、wijgrid で階層データビューを作成する方法を示します。この例では、wijgrid コントロールを Nwind.mdb データベースの Customers テーブルおよび Orders テーブルに連結します。これらのテーブルの各フィールドを使用して、wijgrid 内で階層データ連結を表示します。

以下のサンプルスクリプトでは、グリッド内に階層データ連結を表示するためのさまざまなオプションを設定します。

これらの手順を完了すると、詳細テーブルがマスターテーブル内にネストされた階層グリッドが作成されます。作成されたウィジェットは、実際には次のように表示されます。

スクリプト
コードのコピー 
<script id="scriptInit" type="text/javascript">
   require(["wijmo.wijgrid"], function () {
     $(document).ready(function () {
        $("#grid").wijgrid({
        //Bind Wijgrid to a data source
          data: nwind.customers,
            columnsAutogenerationMode: "none",
              columns: [
              //set dataKey value
               { dataKey: "CompanyName", headerText: "Company name" },
               { dataKey: "ContactName", headerText: "Contact name" }
                       ],
              detail: {
                data: nwind.orders,
                  columnsAutogenerationMode: "none",
                  columns: [
      { dataKey: "OrderDate", headerText: "Order date", dataType: "datetime" },
      { dataKey: "Freight", headerText: "Freight", dataType: "number" }
                            ],
                //Link master-detail tables using relation
       relation: [
               { masterDataKey: "CustomerID", detailDataKey: "CustomerID" }
                 ],
                 detail: {
                      data: nwind.orderDetails,
                      columnsAutogenerationMode: "none",
                      columns: [
           { dataKey: "ProductName", headerText: "Product name" },
           { dataKey: "UnitPrice", headerText: "Unit price", dataType: "currency" },
           { dataKey: "Quantity", headerText: "Quantity", dataType: "number" }
                 ],
          relation: [
  { masterDataKey: "OrderID", detailDataKey: "OrderID" }
                            ]
                        }
                    }
                });
            });
        });
     //fetch data from nwind database
        var nwind = {
        //table customers
            customers: [
                { CustomerID: "ALFKI", CompanyName: "Alfreds Futterkiste", ContactName: "Maria Anders" },
                { CustomerID: "ANATR", CompanyName: "Ana Trujillo Emparedados y helados", ContactName: "Ana Trujillo" },
                { CustomerID: "ANTON", CompanyName: "Antonio Moreno Taqueria", ContactName: "Antonio Moreno" }
            ],
            //table orders
            orders: [
                { OrderID: 10643, CustomerID: "ALFKI", OrderDate: new Date(2015, 8, 26), Freight: 29.46 },
                { OrderID: 10692, CustomerID: "ALFKI", OrderDate: new Date(2015, 10, 3), Freight: 61.02 },
                { OrderID: 10702, CustomerID: "ALFKI", OrderDate: new Date(2015, 10, 13), Freight: 23.94 },
                { OrderID: 10308, CustomerID: "ANATR", OrderDate: new Date(2014, 9, 19), Freight: 1.61 },
                { OrderID: 10625, CustomerID: "ANATR", OrderDate: new Date(2015, 8, 8), Freight: 43.9 },
                { OrderID: 10365, CustomerID: "ANTON", OrderDate: new Date(2014, 11, 28), Freight: 22 },
                { OrderID: 10507, CustomerID: "ANTON", OrderDate: new Date(2015, 4, 16), Freight: 47.45 }
            ],
            orderDetails: [
                { OrderID: 10643, ProductName: "Chartreuse verte", UnitPrice: 18, Quantity: 21 },
                { OrderID: 10643, ProductName: "Spegesild", UnitPrice: 12, Quantity: 2 },
                { OrderID: 10692, ProductName: "Vegie-spread", UnitPrice: 43.9, Quantity: 20 },
                { OrderID: 10702, ProductName: "Aniseed Syrup", UnitPrice: 10, Quantity: 6 },
                { OrderID: 10308, ProductName: "Gudbrandsdalsost", UnitPrice: 36, Quantity: 1 },
                { OrderID: 10308, ProductName: "Outback Lager", UnitPrice: 15, Quantity: 5 },
                { OrderID: 10625, ProductName: "Tofu", UnitPrice: 23.25, Quantity: 3 },
                { OrderID: 10625, ProductName: "Camembert Pierrot", UnitPrice: 34, Quantity: 10 },
                { OrderID: 10365, ProductName: "Queso Cabrales", UnitPrice: 21, Quantity: 24 },
                { OrderID: 10507, ProductName: "Ipoh Coffee", UnitPrice: 46, Quantity: 15 },
                { OrderID: 10507, ProductName: "Chocolade", UnitPrice: 12.75, Quantity: 15 }
            ]
        };
    </script>

 

 

Copyright © GrapeCity inc. All rights reserved.